
import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.itemsIndexed
import androidx.compose.material.MaterialTheme
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.window.singleWindowApplication
import com.gitee.wsl.compose.calendar.calendarSampleView
import com.gitee.wsl.compose.canvaspainter.canvasPainterSampleView
import com.gitee.wsl.compose.chart.KoalaPlotTheme
import com.gitee.wsl.compose.chart.chartSampleView
import com.gitee.wsl.compose.chart.sample.Thumbnail
import com.gitee.wsl.compose.chart.sample.WindowSizeClass
import com.gitee.wsl.compose.chart.sample.WindowWidthSizeClass
import com.gitee.wsl.compose.richtext.richTextEditorSampleView
import com.gitee.wsl.compose.richtext.richTextSampleView
import com.gitee.wsl.compose.scrollbars.scrollbarSampleView


@OptIn(ExperimentalMaterial3Api::class)
fun main() = singleWindowApplication {
    MaterialTheme {
        KoalaPlotTheme {
            var selectedTabIndex by remember { mutableStateOf(-1) }

            Scaffold(topBar = {
                if (selectedTabIndex == -1) {
                    TopAppBar(
                        title = { Text("Select Sample") }
                    )
                } else {
                    TopAppBar(
                        title = { Text(mainSamples[selectedTabIndex].name) },
                        navigationIcon = {
                            IconButton({ selectedTabIndex = -1 }) {
                                Icon(Icons.AutoMirrored.Filled.ArrowBack, "Back")
                            }
                        }
                    )
                }
            }) {
                Column(Modifier.fillMaxWidth()) {
                    if (selectedTabIndex == -1) {
                        ThumbnailsView(
                            modifier = Modifier.align(Alignment.CenterHorizontally)
                        ) {
                            selectedTabIndex = it
                        }
                    } else {
                        mainSamples[selectedTabIndex].content.invoke()
                    }
                }
            }
        }
    }
}


/**
 * Displays the sample thumbnails.
 */
@Composable
internal fun ThumbnailsView(
    modifier: Modifier = Modifier,
    select: (Int) -> Unit
) {
    BoxWithConstraints(modifier) {
        val sizeClass = WindowSizeClass.fromSize(maxWidth, maxHeight)

        @Suppress("MagicNumber")
        val columns = when (sizeClass.widthSizeClass) {
            WindowWidthSizeClass.Compact -> 2
            WindowWidthSizeClass.Medium -> 3
            WindowWidthSizeClass.Expanded -> 4
        }

        LazyVerticalGrid(
            columns = GridCells.Fixed(columns)
        ) {
            itemsIndexed(mainSamples) { index, item ->
                Thumbnail({ select(index) }, item.thumbnail)
            }
        }
    }
}

private val mainSamples = buildList {
    add(chartSampleView)
    add(canvasPainterSampleView)
    add(calendarSampleView)
    add(richTextSampleView)
    add(richTextEditorSampleView)
    add(scrollbarSampleView)
}

